<template lang="html">
<!-- 111 -->
  <section class="alert">
    <mu-alert :color="data.color" delete v-if="data.show" @delete="closeAlert()" transition="mu-scale-transition">
      <mu-icon left :value="data.iconType"></mu-icon>{{data.text}}
    </mu-alert>
  </section>

</template>

<script lang="js">
// 222
  export default  {
    name: 'alert',
    props: ['data'],
    mounted () {
      
    },
    data () {
      return {

      }
    },
    methods: {
        // 弹框点击关闭事件
        closeAlert() {
          // 关闭弹框
          this.data.show = false;
        }
    },
    computed: {

    }
}


</script>

<style scoped lang="scss">
// 333
  .alert {
      .mu-alert {
        position: fixed;
        top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
  }
</style>
